<template>
  <div class="p-30">
    <!-- 讨论表格列表 -->
    <el-table :data="talks" stripe size="mini">
      <el-table-column
        prop="title"
        label="标题"
        show-overflow-tooltip
        width="180"
      ></el-table-column>
      <el-table-column
          prop="createrName"
          label="发起人"
          width="90"
      ></el-table-column>
      <el-table-column
          prop="views"
          label="被浏览量"
          width="90"
      ></el-table-column>
      <el-table-column
          prop="content"
          label="内容"
      ></el-table-column>
      <el-table-column
          label="图片"
          width="130"
      >
        <template v-slot="{row}">
          <el-image :src="row.img" class="w-100 height-100">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
      >
        <template v-slot="{row}">
          <el-button type="danger" @click="deleteTalk(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 讨论表格列表 end-->

    <!-- 分页器 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-show="total>limit"
        :page-size="limit"
        :current-page.sync="pageNo"
        class="mt-30 text-center"
    ></el-pagination>
    <!-- 分页器 end-->
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "TalkList",
  data() {
    return {
      pageNo: 1,
      limit: 10
    }
  },
  mounted() {
    this.getTalks()
  },
  computed: {
    ...mapState('talk', ['talks', 'total'])
  },
  methods: {
    getTalks() {
      this.$store.dispatch('talk/getTalks', {
        society_id: this.$store.getters.society_id,
        pageNo: this.pageNo, limit: this.limit, orderBy: 'id DESC'
      })
    },
    async deleteTalk(id){
      await this.$store.dispatch('talk/delTalk',id);
      this.getTalks();
    }
  },
  watch: {
    pageNo() {
      this.getTalks()
    }
  }
}
</script>

<style scoped>

</style>